<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录界面</title>

    <style type="text/css">
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            /* 渐变色网站： https://webgradients.com/*/
            background-image: linear-gradient(to top, #ace0f9 0%, #fff1eb 100%);
            /* 渐变换图片 */
        }

        .login {
            width: 400px;
            height: 250px;
            background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
            border-radius: 8px;
        }

        .login h1 {
            height: 38px;
            width: 93%;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            line-height: 38px;
            font-size: 30px;
            text-align: center;
            border-radius: 5px;
            margin: 15px auto;
        }

        .login-form {
            width: 60%;
            margin: 0 auto;
        }

        .login-form form input {
            width: 220px;
            height: 30px;
            outline: none;
            margin: 10px auto;
            border-radius: 5px;
        }

        .button {
            /* 按钮样式模板网站：http://tools.jb51.net/static/api/button_css/ */
            line-height: 30px;
            height: 30px;
            width: 70px;
            color: #ffffff;
            background-color: #4a8cf7;
            font-size: 16px;
            font-weight: normal;
            font-family: Arial;
            border: 0px solid #dcdcdc;
            -webkit-border-top-left-radius: 3px;
            -moz-border-radius-topleft: 3px;
            border-top-left-radius: 3px;
            -webkit-border-top-right-radius: 3px;
            -moz-border-radius-topright: 3px;
            border-top-right-radius: 3px;
            -webkit-border-bottom-left-radius: 3px;
            -moz-border-radius-bottomleft: 3px;
            border-bottom-left-radius: 3px;
            -webkit-border-bottom-right-radius: 3px;
            -moz-border-radius-bottomright: 3px;
            border-bottom-right-radius: 3px;
            -moz-box-shadow: inset 0px 0px 0px 0px #ffffff;
            -webkit-box-shadow: inset 0px 0px 0px 0px #ffffff;
            box-shadow: inset 0px 0px 0px 0px #ffffff;
            text-align: center;
            display: inline-block;
            text-decoration: none;
        }

        .button:hover {
            background-color: #446bf7;
        }

        .footer {
            position: fixed;
            bottom: 0;
            height: 50px;
            font-size: 12px;
            text-align: center;
            font-family: "宋体";
        }
    </style>

</head>
<body>
    <div>
        <h1>表单完成POST请求案例</h1>

        <div class="login-form">
            <form method="post">
                
                <input type="text" name="username" id="usr" value="" placeholder="请输入账号">
                <input type="password" name="password" id="pwd" value="" placeholder="请输入密码">
                <input type="submit" class="button" value="登录">

            </form>
        </div>

    </div>
</body>
</html>